<template>
	<view>
		<view class="frienddetail" :style="{ 'margin-top': getnavbarheightdata + 'rpx'}">
			<uni-nav-bar shadow left-icon="left" right-icon="staff" leftText="返回" rightText="设置" title="详情"  @clickLeft="clicklefticon()" @clickRight="clickrighticon()" @headerheight="headerheight"/>
			<view class="content">
				<transition appear
				            name="animate__animated animate__bounce"
				            enter-active-class = "animate__backInDown"
							leave-active-class="animate__slideInUp">
					<template>
						<view class="content" v-if="!isShow">
							<view class="imgall" key="1">
								<image class="contentbigimg" :src="baseurl+frienddetail.imgUrl" ></image>
								<view v-if="frienddetail.sex == '男'">
									<image class="contentsex" src="@/static/tabBar/search/man.png" mode=""></image>
								</view>
								<view style="background-color: #fff;" v-else>
									<image class="contentsex" src="@/static/tabBar/search/girl.png" mode=""></image>
								</view>
							</view>
							<view class="contentdetail"  key="2">
								<view class="username" v-if="! frienddetail.isfriend">
									{{frienddetail.nickname}}
								</view>
							
								<view class="username" v-else>
									{{frienddetail.userName}}
								</view>	
								<!-- 查询聊天记录看看是否有备注 -->
								<view class="usernickname">
									昵称:{{frienddetail.nickname}}
								</view>
								<view class="usercontent">
									<view v-if="frienddetail.news != null">
										{{frienddetail.news}}
									</view>
									<view class="" v-else>
										这人真的很懒,啥也没留下
									</view>
								</view>
							</view>
							<view class="adduser"  key="3">
								
								<view class="contentadd" v-if="Number(this.state) !== 0 && this.userInfo.id != this.friendID" @tap="addfriend()">
									添加好友
								</view>
								<!-- 直接的话不显示 -->
								<view class="contentadd" @click="clickmyself" v-else-if="this.userInfo.id == this.friendID">
									镜像
								</view>
								<view class="contentsend" v-else @tap="gofriendmsgpage(frienddetail)">
									发送消息
								</view>
							</view>
						</view>
					</template>
				</transition>
				
				 <transition
				            appear
				            name="animate__animated animate__bounce"
				            enter-active-class = "animate__slideInUp"
							leave-active-class="animate__backOutDown"
				        >
						<view v-if="isShow" class="reserva-detal" >
							<!-- 阴影框 -->
							<view class="pop-mask" @tap="hidePop()">
								<uni-nav-bar shadow left-icon="left" leftText="返回" title="添加好友"  @clickLeft="clicklefticon()" />
							</view>
							
							<view class="pop-box">
								<view class="pop-box-top">
									<image class="contentbigimg" :src="baseurl+frienddetail.imgUrl" ></image>
								</view>
								<view class="pop-boxusername">
										{{frienddetail.userName}}
								</view>
								<view class="inptop">
									<uni-easyinput type="textarea" v-model="textcontent" placeholder="请求加为好友"></uni-easyinput>
								</view>
								<view class="inpbot">
									<view class="cancle" @tap="cancletap">
										取消
									</view>
									<view class="sendbutton" @tap="sendrequestfriend">
										发送
									</view>
								</view>
								
							</view>
						</view>
				</transition>
				
			</view>
			
			<image class="frienddetailimg" :src="baseurl+frienddetail.imgUrl" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import 'animate.css';
	import $http from "@/common/api/request.js"
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				isShow:false,
				textcontent:"",
				frienddetail:{},
				friendID:-1,
				state:0,
				baseurl:"https://zyc618.mynatapp.cc",
				getnavbarheightdata:0,
				rules:{
					textcontent: {
						rule: /\S/,
						msg: "账号不能为空"
					},
				}
			};
		},
		components:{
			
		},
		methods:{
			headerheight(heig){
				
				this.getnavbarheightdata = heig;
			},
			//函数判断规则:
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					uni.showToast({
						title: this.rules[key].msg,
						icon: "none"
					})
					bool = false;
					return bool;
				}
				return bool;
			},
			//返回list1页面
			clicklefticon(){
				uni.navigateTo({
					url:"/pages/list1/list1"
				})
			},
			clickrighticon(){
				//查看好友详情
				if(this.userInfo.id == this.friendID){
					uni.navigateTo({
						url:`/pages/my-config/my-config`
					})
				}else{
					uni.navigateTo({
						url:`/pages/frienddetailpage/frienddetailpage?friendID=${this.friendID}`
					})
				}
				
			},
			hidePop() {
				this.isShow=false;
				
			},
			addfriend(){
				this.isShow=true;
				
			},
			cancletap(){
				this.isShow=false;
				this.textcontent= ""
			},
			//前往聊天页面:
			gofriendmsgpage(item){
				this.$nextTick(()=>{
					this.navigateTo({
						url:`/pages/messagespage/messagespage?friendNickname=${item.nickname}&friendID=${item.id}&pathavatar=${item.imgUrl}`
					})
				})
			},
			//镜像:
			clickmyself(){
				uni.showToast({
					title:"哎呦你干嘛~自己有什么好点的",
					icon:"none"
				})
			},
			//获取好友信息:
			sendtap(index){
				//发起请求
				$http.request({
					url: "/user/getfrienddetail",
					method:"POST",
					data: {
						friendID:index,
					}
					}).then((res) => {
						if(res.code == 200){
							this.frienddetail = res.data;
							this.isfriend(index);
						}else{
							uni.showToast({
								title:"异常",
								during:2500,
								mask:true,
								icon:"error"
							})
						}
					}).catch((err) => {
						console.log(err);
					})
			},
			//判断是否为好友:
			isfriend(index){
				$http.request({
					url: "/search/isfriend",
					method:"POST",
					data: {
						friendID:index,
						UserID:this.userInfo.id
					}
					}).then((res) => {
						if(res.code == 200){
							this.$set(this.frienddetail, 'isfriend', res.data.state);//0为已经是好友
						}else{
							this.$set(this.frienddetail, 'isfriend', 1);
						}
					}).catch((err) => {
						console.log(err);
					})
			},
			//发送好友:
			sendrequestfriend(){
				if(! this.validate("textcontent")){
					return;
				}
				$http.request({
					url: "/friend/applyfriend",
					method: "POST",
					data: {
						UserID:this.userInfo.id,
						friendID:this.friendID,
						message:this.textcontent
					}
					}).then((res) => {
						if(res.code == 200){
							uni.showToast({
								title:"发送成功",
								during:1500,
								musk:true,
								icon:"success"
							})
							this.$nextTick(()=>{
								this.cancletap()
							})
						}
					}).catch((err) => {
						console.log(err);
					})
			}
		},
		onLoad(e) {
			//获取friend详细:
			this.sendtap(e.friendID);
			this.friendID = e.friendID;
			this.state = e.state;
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			}),
		}
	}
</script>

<style lang="scss">
.frienddetail{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 90%;
	.navbarbag{
		background-color: rgba(0,0,0,.90) !important;
	}
	.content{
		width: 100%;
		height: 100%;
		.imgall{
			position: relative;
			top: 20%;
			left: 50%;
			width: 50%;
			transform: translateX(-50%);
			aspect-ratio: 1 / 1; 
			overflow: hidden; 
			display: flex;
			.contentbigimg{
				border-radius: $uni-border-radius-base;
				width: 100%; 
				height: 100%; 
				object-fit: cover; 
			}
			.contentsex{
				border-radius: $uni-border-radius-circle;
				background-color: #fff;
				position: absolute;
				top: 85%;
				left: 80%;
				transform: translateY(-20%);
				width: 20%; 
				height: 20%; 
				object-fit: cover; 
				z-index: 999;
			}
		}
		.contentdetail{
			margin-top: 40%;
			padding: 30rpx;
			background-color: rgba(255,255,255,0.45);
			text-align: center;
			.username{
				font-size: 46rpx;
				line-height: 50rpx;
			}
			.usernickname{
				font-size: $uni-font-size-lg;
				color: $uni-color-paragraph;
				line-height: 90rpx;
			}
			.usercontent{
				font-size: $uni-font-size-sm;
				color: $uni-color-paragraph;
				padding: 0 30rpx;
			}
		}
		
		.adduser{
			position:fixed;
			left: 0;
			bottom: 0;
			line-height: 80rpx;
			width: 100%;
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $uni-color-paragraph;
			font-size: $uni-font-size-lg;
			.contentadd{
				width: 85%;
				background-color: #3589fa;
				text-align: center;
			}
			.contentsend{
				width: 85%;
				background-color: $uni-color-primary;
				text-align: center;
			}
		}
		
		.reserva-detal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		.pop-mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 25%;
			opacity: 1;
		}
	
		.pop-box {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 75%;
			background-color: rgba(255, 255, 255, .95);
			.pop-box-top{
				position: relative;
				top: -30%;
				left: 50%;
				width: 52%;
				transform: translateY(50%) translateX(-50%);
				aspect-ratio: 1 / 1; 
				overflow: hidden; 
				.contentbigimg{
					width: 100%;
					height: 100%; 
					object-fit: cover;
					border-radius: $uni-border-radius-base;
				}
			}
			.pop-boxusername{
				font-size: 50rpx;
				position: relative;
				top: -5%;
				left: 55%;
				width: 100%;
				transform: translateY(50%) translateX(-50%);
			}
			.inptop {
				display: flex;
				font-size: $uni-font-size-lg;
				padding: 30rpx;
			}
			.inpbot{
				display: flex;
				position: fixed;
				left: 0;
				bottom: 0;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				line-height: 80rpx;
				text-align: center;
				.cancle{
					background-color: $uni-text-color-disable;
					width: 25%;
					border-radius: $uni-border-radius-base;
				}
				.sendbutton{
					background-color: #3589fa;
					border-radius: $uni-border-radius-base;
					width: 60%;
				}
			}
		}
		
	}
		
		
		
	}
	.frienddetailimg{
		width: 110%;
		height: 110%;
		position: absolute;
		left: -10rpx;
		top: -10rpx;
		z-index: -999;
		filter: blur(14px);
		opacity: 0.7;
	}
}
</style>
